.<template>
  <div>
    <div class="viewBox">
      <div class="marginBox">
        <div class="searchBox">
          <img src="../../../public/img/logo/img1721517091251ef0.png" class="imgBox" />
          <el-input placeholder="搜索你想要的内容" v-model="input" clearable class="inputBox"></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="buttonBox2"
            @click="getSearchData"
          >搜索</el-button>
        </div>
        <div class="seachTabs">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="全部"></el-tab-pane>
            <el-tab-pane label="珠海港圈" name="珠海港圈"></el-tab-pane>
            <el-tab-pane label="互帮互助" name="互帮互助"></el-tab-pane>
            <el-tab-pane label="创新建议" name="创新建议"></el-tab-pane>
            <el-tab-pane label="资源共享" name="资源共享"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="radioGroup">
          <el-radio-group v-model="radio3" size="small" fill="#1d2f70" @change="radioGroup">
            <!-- <el-radio-button label="综合排序"></el-radio-button> -->
            <el-radio-button label="最新发布"></el-radio-button>
            <el-radio-button label="最多浏览"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="listBox">
          <el-divider></el-divider>
          <noMore v-if="listData.length == 0"></noMore>
          <div
            class="invitationBox"
            v-for="(item, index) in listData.slice(skipSize, endSize)"
            :key="index"
          >
            <!-- //有图 -->
            <div
              v-if="
                item.aeticletype &&
                  (item.aeticletype == '珠海港圈' ||
                    item.aeticletype == '创新建议')
              "
            >
              <div class="flexBox">
                <div class="leftImg">
                  <el-image style="width: 123px; height: 123px" :src="item.articleimg" fit="cover"></el-image>
                </div>
                <div>
                  <div
                    class="invitationBoxTitle"
                    @click="toZhuHaiDetails(item)"
                  >{{ item.articlename }}</div>
                  <div class="invitationBoxSubTitle">{{ item.textReplace }}</div>
                  <div class="invitationBoxBottom">
                    <div class="invitationBoxBottomItem">{{ item.reading }} 次阅读</div>
                    <div class="invitationBoxBottomItem">{{ item.reply }} 回复</div>
                    <div class="invitationBoxBottomItem">{{ item.praiseSize }} 赞</div>
                    <div>{{ item.aeticletype }}</div>
                  </div>
                </div>
              </div>
              <el-divider></el-divider>
            </div>

            <!-- //无图 -->
            <div v-if="item.aeticletype && item.aeticletype == '资源共享'">
              <div class="flexBox2">
                <div>
                  <div
                    class="invitationBoxTitle"
                    @click="toResourceDetails(item)"
                  >{{ item.resourcename }}</div>
                  <div class="invitationBoxSubTitle">{{ item.textReplace }}</div>
                  <div class="invitationBoxBottom">
                    <div class="invitationBoxBottomItem">{{ item.reading }} 次阅读</div>
                    <div class="invitationBoxBottomItem">{{ item.reply }} 回复</div>
                    <div class="invitationBoxBottomItem">{{ item.praiseSize }} 赞</div>
                    <div>{{ item.aeticletype }}</div>
                  </div>
                </div>
              </div>
              <el-divider></el-divider>
            </div>

            <!-- //问题 -->
            <div v-if="item.problemname">
              <div class="flexBox2">
                <div>
                  <div
                    class="invitationBoxTitle"
                    @click="toHelpDetails(item)"
                  >{{ item.problemname }}</div>
                  <div class="invitationBoxSubTitle">{{ item.textReplace }}</div>
                  <div class="invitationBoxBottom">
                    <div class="invitationBoxBottomItem">{{ item.reading }} 次阅读</div>
                    <div class="invitationBoxBottomItem">{{ item.reply }} 回答</div>
                    <div>互帮互助</div>
                  </div>
                </div>
              </div>
              <el-divider></el-divider>
            </div>
          </div>
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="limitSize"
            layout="prev, pager, next, jumper"
            :total="articleSize"
            :current-page.sync="currentPage"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { post_searchData } from "../../api/searchData";
import noMore from "@/components/noMore";
export default {
  data() {
    return {
      input: "",
      activeName: "全部",
      radio3: "最新发布",
      skipSize: 0, //开始位置
      endSize: 10, //末尾位置
      articleSize: 0, //总文章
      limitSize: 10,
      currentPage: 1,
      listData: []
    };
  },
  watch: {
    $route(newRouter) {
      if (newRouter.path == "/search") {
        console.log("这是搜索页面");

        if (this.$route.query.input) {
          this.input = this.$route.query.input;
        }
        this.getSearchData();
      }
    }
  },
  created() {
    if (this.$route.query.input) {
      this.input = this.$route.query.input;
    }
    this.getSearchData();
  },
  components: {
    noMore
  },
  methods: {
    async getSearchData() {
      let seachdata = await post_searchData({
        input: {
          $regex: this.input
        },
        type: this.activeName,
        sort: this.radio3
      });
      console.log("搜索数据：", seachdata);
      this.listData = seachdata.data;
      this.currentPage = 1;
      this.articleSize = seachdata.data.length;
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.skipSize = 0;
      this.endSize = 10;
      this.getSearchData();
    },
    radioGroup() {
      this.skipSize = 0;
      this.endSize = 10;
      this.getSearchData();
    },
    handleCurrentChange(val) {
      this.skipSize = (val - 1) * this.limitSize;
      this.endSize = this.skipSize + this.limitSize;
      console.log(`当前页: ${val}`);
    },
    toZhuHaiDetails(item) {
      if (item.aeticletype == "珠海港圈") {
        this.$router.push({
          path: "/zhuhaiPortCircleDetails",
          query: {
            article_id: item._id
          }
        });
      } else {
        this.$router.push({
          path: "/proposalDetails",
          query: {
            article_id: item._id
          }
        });
      }
    },
    toHelpDetails(item) {
      this.$router.push({
        path: "/helpDetails",
        query: {
          problem_id: item._id
        }
      });
    },
    toResourceDetails(item) {
      this.$router.push({
        path: "/resourceSharingDetails",
        query: {
          article_id: item._id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.viewBox {
  width: 100%;
  background: white;
  .marginBox {
    width: 1000px;
    margin: 0 auto;
    min-height: 550px;
    .searchBox {
      text-align: center;
      padding: 35px 0;
      .imgBox {
        height: 40px;
        display: inline-block;
        margin-bottom: -14px;
        margin-right: 10px;
      }
      .inputBox {
        width: 400px;
      }
      .buttonBox2 {
        margin-left: 10px;
        background: #1d2f70;
        border: #1d2f70;
        color: #fff;
        margin-left: 10px;
        &:hover {
          background: #7d99e2;
        }
      }
    }
    .radioGroup {
      margin-top: 10px;
    }
    .listBox {
      padding-bottom: 20px;
      .invitationBox {
        .flexBox {
          display: flex;
          .leftImg {
            margin-right: 20px;
          }
          .invitationBoxTitle {
            font-size: 23px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            // width: 727px;
            overflow: hidden;
            text-overflow: ellipsis; //超出部分以省略号显示
            // white-space: nowrap;
            display: -webkit-box;
            -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
            -webkit-box-orient: vertical;
            cursor: pointer;
            &:hover {
              color: #1d2f70;
              text-decoration: underline;
            }
          }
          .invitationBoxSubTitle {
            min-height: 40px;
            color: #6c6c6c;
            font-size: 17px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
            -webkit-box-orient: vertical;
          }
          .invitationBoxBottom {
            display: flex;
            margin-top: 14px;
            color: #b3b2b2;
            .invitationBoxBottomItem {
              margin-right: 18px;
              font-size: 14px;
            }
          }
        }
        .flexBox2 {
          .invitationBoxTitle {
            font-size: 23px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            // width: 727px;
            overflow: hidden;
            text-overflow: ellipsis; //超出部分以省略号显示
            // white-space: nowrap;
            display: -webkit-box;
            -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
            -webkit-box-orient: vertical;
            cursor: pointer;
            &:hover {
              color: #1d2f70;
              text-decoration: underline;
            }
          }
          .invitationBoxSubTitle {
            min-height: 40px;
            color: #6c6c6c;
            font-size: 17px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
            -webkit-box-orient: vertical;
          }
          .invitationBoxBottom {
            display: flex;
            margin-top: 14px;
            color: #b3b2b2;
            .invitationBoxBottomItem {
              margin-right: 18px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
